<template>
  <SubPanel :title="label" ref="subPanel" class="add-customer-sub-panel"
    @subPanelOpen="$emit('subPanelOpen')"
    @subPanelClose="$emit('subPanelClose')"
  >
    <AddCus
      ref="addCus"
      v-if="init"
      rangeType="customerSlot"
      :isDailog="false"
      :isFull="true"
      :custInfo="customer"
      :currentBusinessObj="currentBusinessObj"
      :editCustType="editCustType"
      @editCust="editCust"
    />
  </SubPanel>
</template>

<script>
import SubPanel from './SubPanel.vue'
import AddCus from '@/components/business-modules/customer/AddCus.vue'
export default {
  name: 'AddCustomerSubPanel',
  data () {
    return {
      init: false
    }
  },
  components: {
    SubPanel,
    AddCus
  },
  props: {
    customer: {
      type: Object,
      default: function () {
        return {}
      }
    },
    webchatData: Object,
    currentBusinessObj: Object
  },
  computed: {
    editCustType () { return this.customer._id ? 'update' : 'add' },
    label () { return this.customer._id ? this.$t('customer.updateCustomer') : this.$t('customer.addCustomer') }
  },
  methods: {
    open () {
      this.init = true
      this.$refs.subPanel.open()
      this.$refs.addCus && this.$refs.addCus.fetchData()
      this.$refs.addCus && this.$refs.addCus.clearValidate()

      if (
        this.$refs.addCus &&
        this.$refs.addCus.$refs &&
        this.$refs.addCus.$refs.owner &&
        this.$refs.addCus.$refs.owner.fetchData
      ) {
        this.$refs.addCus.$refs.owner.fetchData()
      }
    },
    close () {
      this.$refs.subPanel.close()
    },
    editCust (custForm) {
      if (this.editCustType === 'add') {
        if (this.webchatData) {
          custForm.chatSessionInfo = {
            'seoSource': this.webchatData.seoSource || '',
            'seoKeywords': this.webchatData.seoKeywords || '',
            'ip': this.webchatData.ip || '',
            'fromUrl': this.webchatData.fromUrl || '',
            'urlTitle': this.webchatData.urlTitle || '',
            'area': this.webchatData.area || ''
          }
        }
        this.$store.dispatch('addCustomer', custForm).then((val) => {
          if (val.success) {
            this.$message.success(this.$t('userInfo.editSuccess'))
            this.close()
          }
        })
      } else {
        custForm.type = this.currentBusinessObj.type
        custForm.tabType = this.currentBusinessObj.tabType
        custForm.callId = this.currentBusinessObj.callId
        this.$store.dispatch('updateCustomer', custForm)
        .then((val) => {
          if (val.success) {
            this.$message.success(this.$t('userInfo.editSuccess'))
            this.close()
          }
        })
      }
    }
  }
}
</script>

<style lang="stylus">
  .add-customer-sub-panel
    form.el-form
      padding: 10px 20px
      margin-bottom: 45px
    // .el-form-item__label
    //   font-weight: 900
</style>
